@reference "../../styles/index.css";

.button {
  @apply relative
    inline-flex
    items-center
    justify-center
    gap-2
    px-4.5
    py-2.5
    text-center
    font-semibold
    motion-safe:transition-colors;

  svg {
    @apply size-5;
  }

  &[aria-disabled='true'] {
    @apply cursor-not-allowed;
  }

  &.small {
    @apply px-3
      py-2
      text-sm;
  }

  &.neutral {
    @apply rounded-sm
      bg-neutral-900
      text-white
      dark:text-neutral-200;

    &:hover:not([aria-disabled='true']) {
      @apply bg-neutral-800;
    }

    &[aria-disabled='true'] {
      @apply bg-neutral-900
        opacity-50;
    }

    &:focus {
      @apply bg-neutral-800;
    }
  }

  &.primary {
    @apply rounded-sm
      border
      border-green-600
      bg-green-600
      text-white
      shadow-xs;

    &:hover:not([aria-disabled='true']) {
      @apply border-green-700
        bg-green-700
        text-white;
    }

    &:focus {
      @apply border-green-700
        bg-green-700;
    }

    &[aria-disabled='true'] {
      @apply bg-green-600
        opacity-50;
    }
  }

  &.secondary {
    @apply rounded-lg
      border
      border-neutral-200
      text-neutral-800
      dark:border-neutral-900
      dark:text-neutral-200;

    &:hover:not([aria-disabled='true']) {
      @apply bg-neutral-200
        text-neutral-800
        dark:bg-neutral-900
        dark:text-neutral-200;
    }

    &[aria-disabled='true'] {
      @apply bg-transparent
        opacity-50;
    }

    &:focus {
      @apply bg-neutral-100
        text-neutral-800
        dark:bg-neutral-900
        dark:text-neutral-200;
    }
  }

  &.special {
    @apply before:bg-gradient-glow-backdrop
      rounded-lg
      border
      border-green-600/30
      bg-green-600/10
      text-white
      shadow-xs
      before:absolute
      before:top-0
      before:right-0
      before:left-0
      before:-z-10
      before:mx-auto
      before:h-full
      before:w-full
      before:opacity-30
      before:content-['']
      after:absolute
      after:-top-px
      after:right-0
      after:left-0
      after:mx-auto
      after:h-px
      after:w-2/5
      after:bg-gradient-to-r
      after:from-green-600/0
      after:via-green-600
      after:to-green-600/0
      after:content-[''];

    &[aria-disabled='true'] {
      @apply opacity-50;
    }

    &:hover:not([aria-disabled='true']) {
      @apply bg-green-600/20;
    }

    &:focus {
      @apply bg-green-600/20;
    }
  }

  &.warning {
    @apply border-warning-600
      bg-warning-600
      rounded-sm
      border
      text-white
      shadow-xs;

    &:hover:not([aria-disabled='true']) {
      @apply border-warning-700
        bg-warning-700
        text-white;
    }

    &:focus {
      @apply border-warning-700
        bg-warning-700;
    }

    &[aria-disabled='true'] {
      @apply bg-warning-600
        opacity-50;
    }
  }

  &.info {
    @apply border-info-600
      bg-info-600
      rounded-sm
      border
      text-white
      shadow-xs;

    &:hover:not([aria-disabled='true']) {
      @apply border-info-700
        bg-info-700
        text-white;
    }

    &:focus {
      @apply border-info-700
        bg-info-700;
    }

    &[aria-disabled='true'] {
      @apply bg-info-600
        opacity-50;
    }
  }
}
